<template>
    <div>
        <div class="alarm_remind" @click="showAlarmPopup(alarmQty)" :style="{ background: getBackgroundColor(alarmQty) }">
            <p>{{ alarmQty }}</p>
            <p>报警</p>
        </div>
        <el-dialog custom-class="my-dialog" title="报警信息" :visible.sync="dialogTableVisible" width="60%">
            <el-table class='alarmtable' :data="alarmData" max-height="540"
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{color:'red',textAlign:'center'}">
                <el-table-column property="productionProcess" label="工序" width="120"></el-table-column>
                <el-table-column property="lineNumber" label="线体" width="120"></el-table-column>
                <el-table-column property="startAlarmTime" label="报警时间" width="200"></el-table-column>
                <el-table-column property="alarmDetails" label="报警内容"></el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="pageTurn(scope.$index, alarmData)"
                        type="text"
                        size="medium">
                        跳转页面
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<style scoped>
.alarm_remind{
    width: 3.75rem;
    height: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top-right-radius: .625rem;
    border-bottom-right-radius: .625rem;
    position: absolute;
    top: 2.375rem;
    left: 0;
    font-size: 1.25rem;
    color: white;
    z-index: 5;
}
.alarm_remind:hover{
    cursor: pointer; /* 鼠标移入时改变光标 */
}
.alarmtable{
    font-size: 1rem;
}
</style>
<script>
export default{
    data(){
        return{
            dialogTableVisible:false
        }
    },
    props:{
        alarmData:{
            type:Array,
            required: true
        }
    },
    computed:{
        alarmQty(){
            return this.alarmData.length
        }
    },
    methods:{
        showAlarmPopup(value){
            if(value>0){
                this.dialogTableVisible=true
            }
            else{
                this.$notify({
                    title: '提示',
                    message: '没有报警信息',
                    type: 'warning'
                });
            }
        },
        getBackgroundColor(value){
            if(value>0){
                return '#FF4500'
            }
            else{
                return '#008000'
            }
        },
        pageTurn(index, table) {
            // console.log(index)
            switch(table[index].productionProcess){
                case '烘烤工艺': case '烘烤物流':
                    this.$router.push('/bake')
                    break
                case '封口焊':
                    this.$router.push('/welding')
                    break
                case '二次氦检':
                    this.$router.push('/detection')
                    break
            }
            this.dialogTableVisible=false
        },
    }
}
</script>